<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素尺寸（2）</title>
</head>
<body>
</body>
<script>
  /** 3. 滚动尺寸
   *     a.最后一组尺寸是滚动尺寸（scroll dimensions），提供了元素内容滚动距离的信息。有些元素，比如<html>无须任何代码就可以自动滚动，而其他元素则需要使用
   *       CSS 的 overflow 属性令其滚动。滚动尺寸相关的属性有如下 4 个。
   *       + scrollHeight，没有滚动条出现时，元素内容的总高度。
   *       + scrollWidth，没有滚动条出现时，元素内容的总宽度。
   *       + scrollLeft，内容区左侧隐藏的像素数，设置这个属性可以改变元素的滚动位置。
   *       + scrollTop，内容区顶部隐藏的像素数，设置这个属性可以改变元素的滚动位置。
   *     b.scrollWidth 和 scrollHeight 可以用来确定给定元素内容的实际尺寸。例如，<html>元素是浏览器中滚动视口的元素。因此，document.documentElement.
   *       scrollHeight 就是整个页面垂直方向的总高度。 
   *     c.scrollWidth 和 scrollHeight 与 clientWidth 和 clientHeight 之间的关系在不需要滚动的文档上是分不清的。如果文档尺寸超过视口尺寸，则在所有主
   *       流浏览器中这两对属性都不相等，scrollWidth 和 scollHeight 等于文档内容的宽度和高度，而 clientWidth 和 clientHeight 等于视口的大小。
   *     d.scrollLeft 和 scrollTop 属性可以用于确定当前元素滚动的位置，或者用于设置它们的滚动位置。元素在未滚动时，这两个属性都等于 0。如果元素在垂直方向上
   *       滚动，则 scrollTop 会大于 0，表示元素顶部不可见区域的高度。如果元素在水平方向上滚动，则 scrollLeft 会大于 0，表示元素左侧不可见区域的宽度。因为
   *       这两个属性也是可写的，所以把它们都设置为 0 就可以重置元素的滚动位置。
   **/
   //函数检测元素是不是位于顶部，如果不是则把它滚动回顶部：
   function scrollToTop(element) { 
    if (element.scrollTop != 0) { 
    element.scrollTop = 0; 
   } 

   /** 4. 确定元素尺寸
    *     a.浏览器在每个元素上都暴露了 getBoundingClientRect()方法，返回一个 DOMRect 对象，包含6 个属性：left、top、right、bottom、height 和 
    *       width。这些属性给出了元素在页面中相对于视口的位置。
    * **/
}
</script>
</html>
